<template>
  <div class="productInfo">
    <div>
      <el-page-header class="head" @back="goBack" :content="content">
      </el-page-header>
    </div>
    <div>
      <el-form label-width="80px">

        <el-form-item label="名称">
          <el-input v-model="name"></el-input>
        </el-form-item>

        <el-form-item label="价格">
          <el-input v-model="price"></el-input>
        </el-form-item>

        <el-form-item label="分类">
          <el-select v-model="cate" placeholder="请选择">
            <el-option v-for="item in cate_list" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="品牌">
          <el-select v-model="brand" placeholder="请选择"">
                    <el-option v-for=" item in brand_list" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>



        <el-form-item label="图片">
          <el-upload class="avatar-uploader" action="http://localhost:7002/img/upload" :headers="header"
            list-type="picture-card" :file-list="file_list" :on-success="handleAvatarSuccess">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-button @click="creatProduct" class="button">立即创建</el-button>
      </el-form>

    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        price: '',
        name: '',
        content: '',
        img_id:'',
        file_list: [],
        cate: '',
        cate_list: [],
        brand: '',
        brand_list: [],
        header: {
          authorization: localStorage.getItem('token')
        }
      }
    },
    async created() {
      let id = this.$route.params.id;
      console.log(id)
      if (id) {
        this.content = "编辑商品页面"
        let res = await this.$http('product/get?id=' + id);
        this.name=res.data.name;
        this.price=res.data.price;
        this.brand=res.data.brand_id;
        this.cate=res.data.brand_id;
        this.file_list.push({
          url:`http://localhost:7002/${res.data.img}`
        })
        console.log(1)
        console.log(res);
      } else {
        this.content = "新增商品页面"
      }

      let res = await this.$http.get('cate/select')
      this.cate_list = res.data;
      console.log(res)

      let res1 = await this.$http.get('brand/select')
      this.brand_list = res1.data;
      console.log(res1)

    },
    methods: {
      handleAvatarSuccess(res, file) {
        console.log(res)
        this.img_id=res.data.id
      },
      // beforeAvatarUpload(file) {
      //   const isJPG = file.type === 'image/jpeg';
      //   const isLt2M = file.size / 1024 / 1024 < 2;

      //   // if (!isJPG) {
      //   //   this.$message.error('上传头像图片只能是 JPG 格式!');
      //   // }
      //   // if (!isLt2M) {
      //   //   this.$message.error('上传头像图片大小不能超过 2MB!');
      //   // }
      //   return isJPG && isLt2M;
      // },
      goBack() {
        javascript: history.back(-1);
      },
      async creatProduct() {
        if (this.$route.params.id) {
          let res = await this.$http.post('/product/update', {
            name: this.name,
            price: this.price,
            cate_id: this.cate,
            brand_id: this.brand,
            img_id: this.img_id,
            id:this.$route.params.id
          })

        } else {
          console.log(1)
          let res = await this.$http.post('/product/insert', {
            name: this.name,
            price: this.price, 
            brand_id: this.brand,
            cate_id: this.cate,
            img_id: this.img_id,
          })
          console.log(2);
          console.log(res);
        }
        this.$router.push('/product/List')
      },

    },
  }
</script>
<style>
  .productInfo .head {
    margin: 20px;
  }

  .productInfo .button {
    background: #008080;
    color: white;
    margin-left: 80px;
  }

  .productInfo .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .productInfo .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .productInfo .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .productInfo .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>